<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图-->
        <el-card>
            <!--提示区域-->
            <el-alert
                    title="只可以选择三级菜单商品属性"
                    type="warning"
                    show-icon
                    :closable="false">
            </el-alert>
            <!--选择区域-->
            <el-row class="checked_area">
                <el-col>
                    选择商品属性:
                    <el-cascader
                            ref="cascaderRef"
                            v-model="selectedParentSort"
                            :options="parentSort"
                            :props="cascaderProps"
                            @change="handleChange"
                            clearable>
                    </el-cascader>
                </el-col>
            </el-row>

            <!--tab面板-->
            <el-tabs v-model="activeName" @tab-click="tabClick">
                <el-tab-pane label="动态参数" name="param">
                    <el-row>
                        <el-col>
                            <el-button type="primary" @click="showAddCommonDialog">添加参数</el-button>
                        </el-col>
                    </el-row>
                    <!--表格区域-->
                    <el-table
                            :data="paramData"
                            width="100%"
                            border
                            stripe>
                        <el-table-column type="expand" width="50">
                            <template slot-scope="scope">
                                <el-tag class="exist_tag" type="primary" v-for="item in scope.row.sorts" closable
                                        @close="removeTag(item.id)">
                                    {{item.name}}
                                </el-tag>
                                <el-input
                                        class="input-new-tag"
                                        v-if="inputVisible"
                                        v-model="inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm('param')"
                                        @blur="handleInputConfirm('param')">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50" label="#"></el-table-column>
                        <el-table-column prop="name" label="参数名称"></el-table-column>
                        <el-table-column label="操作" width="300px">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="attr">
                    <el-row>
                        <el-col>
                            <el-button type="primary" @click="showAddCommonDialog">添加属性</el-button>
                        </el-col>
                    </el-row>
                    <!--表格区域-->
                    <el-table
                            :data="attrData"
                            width="100%"
                            border
                            stripe>
                        <el-table-column type="expand" width="50">
                            <template slot-scope="scope">
                                <el-tag class="exist_tag" type="primary" v-for="item in scope.row.sorts" closable
                                        @close="removeTag(item.id)" :key="item.id">
                                    {{item.name}}
                                </el-tag>
                                <el-input
                                        class="input-new-tag"
                                        v-if="inputVisible"
                                        v-model="inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm('attr')"
                                        @blur="handleInputConfirm('attr')">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50" label="#"></el-table-column>
                        <el-table-column prop="name" label="属性名称"></el-table-column>
                        <el-table-column label="操作" width="300px">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </el-card>

        <!--添加属性/参数对话框-->
        <el-dialog
                :title="'添加'+ dialogValue"
                :visible.sync="commonDialogVisible"
                width="50%"
                @close="closeForm">
            <!-- 主体区域-->
            <el-form :model="addData" ref="addFormRef" :rules="rules" status-icon>
                <el-form-item :label="dialogValue" label-width="100px" prop="name">
                    <el-input v-model="addData.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!--按钮区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="commonDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFormSubmit">确 定</el-button>
              </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "SortParameter",
        data() {
            return {
                paramData: [
                    {
                        id: 1,
                        name: '板式',
                        sorts: [
                            {
                                id: 1,
                                name: '世界那么大'
                            },
                            {
                                id: 2,
                                name: '我想去看看'
                            },
                            {
                                id: 3,
                                name: '哭完了吗'
                            }
                        ]
                    }
                ],
                attrData: [
                    {
                        id: 1,
                        name: '主体-商品名称',
                        sorts: [
                            {
                                id: 1,
                                name: '骗人牌独家卫浴'
                            }
                        ]
                    }, {
                        id: 2,
                        name: '显示-曲面',
                        sorts: [
                            {
                                id: 2,
                                name: '是'
                            }
                        ]
                    }, {
                        id: 3,
                        name: '系统-智能电视',
                        sorts: [
                            {
                                id: 31,
                                name: '智能'
                            },
                            {
                                id: 32,
                                name: '省电'
                            }
                        ]
                    }, {
                        id: 4,
                        name: '功耗-整体功率',
                        sorts: [
                            {
                                id: 4,
                                name: '32w/h'
                            }
                        ]
                    }
                ],
                //父级分类列表
                parentSort: [
                    {
                        value: 'zhinan',
                        label: '指南',
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }, {
                                value: 'fankui',
                                label: '反馈'
                            }, {
                                value: 'xiaolv',
                                label: '效率'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }]
                        }, {
                            value: 'daohang',
                            label: '导航',
                            children: [{
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            }, {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }]
                        }]
                    }, {
                        value: 'zujian',
                        label: '组件',
                        children: [{
                            value: 'basic',
                            label: 'Basic',
                            children: [{
                                value: 'layout',
                                label: 'Layout 布局'
                            }, {
                                value: 'color',
                                label: 'Color 色彩'
                            }, {
                                value: 'typography',
                                label: 'Typography 字体'
                            }, {
                                value: 'icon',
                                label: 'Icon 图标'
                            }, {
                                value: 'button',
                                label: 'Button 按钮'
                            }]
                        }, {
                            value: 'form',
                            label: 'Form',
                            children: [{
                                value: 'radio',
                                label: 'Radio 单选框'
                            }, {
                                value: 'checkbox',
                                label: 'Checkbox 多选框'
                            }, {
                                value: 'input',
                                label: 'Input 输入框'
                            }, {
                                value: 'input-number',
                                label: 'InputNumber 计数器'
                            }, {
                                value: 'select',
                                label: 'Select 选择器'
                            }, {
                                value: 'cascader',
                                label: 'Cascader 级联选择器'
                            }, {
                                value: 'switch',
                                label: 'Switch 开关'
                            }, {
                                value: 'slider',
                                label: 'Slider 滑块'
                            }, {
                                value: 'time-picker',
                                label: 'TimePicker 时间选择器'
                            }, {
                                value: 'date-picker',
                                label: 'DatePicker 日期选择器'
                            }, {
                                value: 'datetime-picker',
                                label: 'DateTimePicker 日期时间选择器'
                            }, {
                                value: 'upload',
                                label: 'Upload 上传'
                            }, {
                                value: 'rate',
                                label: 'Rate 评分'
                            }, {
                                value: 'form',
                                label: 'Form 表单'
                            }]
                        }, {
                            value: 'data',
                            label: 'Data',
                            children: [{
                                value: 'table',
                                label: 'Table 表格'
                            }, {
                                value: 'tag',
                                label: 'Tag 标签'
                            }, {
                                value: 'progress',
                                label: 'Progress 进度条'
                            }, {
                                value: 'tree',
                                label: 'Tree 树形控件'
                            }, {
                                value: 'pagination',
                                label: 'Pagination 分页'
                            }, {
                                value: 'badge',
                                label: 'Badge 标记'
                            }]
                        }, {
                            value: 'notice',
                            label: 'Notice',
                            children: [{
                                value: 'alert',
                                label: 'Alert 警告'
                            }, {
                                value: 'loading',
                                label: 'Loading 加载'
                            }, {
                                value: 'message',
                                label: 'Message 消息提示'
                            }, {
                                value: 'message-box',
                                label: 'MessageBox 弹框'
                            }, {
                                value: 'notification',
                                label: 'Notification 通知'
                            }]
                        }, {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [{
                                value: 'menu',
                                label: 'NavMenu 导航菜单'
                            }, {
                                value: 'tabs',
                                label: 'Tabs 标签页'
                            }, {
                                value: 'breadcrumb',
                                label: 'Breadcrumb 面包屑'
                            }, {
                                value: 'dropdown',
                                label: 'Dropdown 下拉菜单'
                            }, {
                                value: 'steps',
                                label: 'Steps 步骤条'
                            }]
                        }, {
                            value: 'others',
                            label: 'Others',
                            children: [{
                                value: 'dialog',
                                label: 'Dialog 对话框'
                            }, {
                                value: 'tooltip',
                                label: 'Tooltip 文字提示'
                            }, {
                                value: 'popover',
                                label: 'Popover 弹出框'
                            }, {
                                value: 'card',
                                label: 'Card 卡片'
                            }, {
                                value: 'carousel',
                                label: 'Carousel 走马灯'
                            }, {
                                value: 'collapse',
                                label: 'Collapse 折叠面板'
                            }]
                        }]
                    }, {
                        value: 'ziyuan',
                        label: '资源',
                        children: [{
                            value: 'axure',
                            label: 'Axure Components'
                        }, {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        }, {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }]
                    }],
                //選中的父级分类数组
                selectedParentSort: [],
                cascaderProps: {
                    expandTrigger: 'hover',
                    // 指定选中的值
                    value: 'value',
                    // 显示的值
                    label: 'label',
                    children: 'children'
                },
                // tab 选中的数据栏目
                activeName: 'param',
                inputVisible: false,
                inputValue: '',
                commonDialogVisible: false,
                addData: {
                    name: ''
                },
                dialogValue: '动态参数',
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {
            this.initPage();
        },
        methods: {
            initPage() {

            },
            handleChange(value) {
                console.log(value);
            },
            // 点击栏切换
            tabClick(tab) {
                // console.log(tab);
                if (tab.name === 'param') {
                    this.dialogValue = '动态参数'
                } else if (tab.name === 'attr') {
                    this.dialogValue = '静态属性'
                } else {
                    this.dialogValue = '未知数据'
                }
            },
            async removeTag() {
                const confirm = await this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);
                if (confirm === 'confirm') {
                    this.$message.success("已确认删除");
                    this.initPage();
                } else {
                    return this.$message.info("已取消删除");
                }
            },
            // input标签处理提交, 通过type === ('param') || ('attr') 判断该提交那个
            handleInputConfirm(type) {
                // 提交数据将 inputValue 提交到服务器, 然后将可见设置为false, 并清空数据
                this.inputValue = '';
                this.inputVisible = false;
            },
            // showInput 展示input 输入框
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            closeForm() {

            },
            addFormSubmit() {
                // 获取当前的分类名称和分类级别加上分类ID
                // 提交后台
                this.$refs.addFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // TODO 然后发起真正的网络请求添加数据
                    this.$message.success('添加成功');
                    this.initPage();
                    this.commonDialogVisible = false;
                });
            },
            // 显示数据啦
            showAddCommonDialog() {
                this.commonDialogVisible = true;
            }

        }
    }
</script>

<style lang="less" scoped>
    .checked_area {
        margin: 15px 0;
    }

    .el-cascader {
        width: 300px;
    }

    .exist_tag {
        margin-right: 10px;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

</style>
